<template>
    <div class="box">
        <NavHeader @search="onSearch" />
        <div class="box-body">
            <div class="service_item" v-if="dataSource?.list?.length !== 0">
                <div v-for="item in dataSource.list">
                    <Item :serviceData="item" />
                </div>
            </div>
            <div v-else>未发现服务商品</div>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import NavHeader from '../../components/NavHeader.vue'
import Item from './Item.vue'
import { searchService } from '../../api/service'
import { ElMessage } from 'element-plus'
import { useRoute } from 'vue-router'
const route = useRoute()

const keywords = ref(route.query.keywords || '')

const findCondition = reactive({
    keywords: keywords.value,
    currentPage: 1,
    pageSize: 10
})

const dataSource = reactive({})

const init = async () => {
    const res = await searchService(findCondition)
    if (res.status !== 200) {
        return ElMessage({
            type: 'error',
            message: `获取数据失败`
        })
    }
    Object.assign(dataSource, res.data)
}

init()

const onSearch = async (value) => {
    findCondition.keywords = value
    keywords.value = value
    const res = await searchService(findCondition)
    if (res.status !== 200) {
        return ElMessage({
            type: 'error',
            message: `获取数据失败`
        })
    }
    Object.assign(dataSource, res.data)
}
</script>

<style lang="scss" scoped>
.box {
    width: 100%;

    .box-body {
        width: 1200px;
        margin: 20px auto 0 auto;

        .service_item {
            display: flex;
            flex-wrap: wrap;
            padding: 20px;
            border-radius: 10px;
            border: 1px solid #ccc;
        }
    }
}
</style>
